<route>
    {
        meta: {
            layout: 'flow',
            title:'流程定义'
        }
    }  
</route>
<template>
    <view>
        <AntdZh>
            <a-row>
                <a-input-search allow-clear v-model:value="queryParams.searchKey" placeholder="关键词 编码/名称"
                    style="width: 200px; margin-bottom: 10px; margin-right: 50px;" @search="reqData()" />
                <a-button v-isAdmin type="primary" style="margin-bottom: 10px; width: 80px;"
                    @click="$.emit('create-define', null)">
                    <template #icon><plus-outlined /></template>新增
                </a-button>
            </a-row>
            <a-table bordered :columns="columns" :data-source="tableData" :loading="loading" :pagination="pagination"
                @change="handleTableChange">
                <template #bodyCell="{ column, record, index }">
                    <template v-if="column.dataIndex === 'status'">
                        <!--执行状态-->
                        <a-tag color="green" v-if="record.status">启用</a-tag>
                        <a-tag color="red" v-else>停用</a-tag>

                    </template>
                    <template v-else-if="column.dataIndex === 'flowGroup'">
                        <!--执行状态-->
                        <view v-if="record.flowGroup">
                            {{ record.flowGroup }}
                        </view>
                        <view v-else>
                            DEFAULT
                        </view>
                    </template>
                    <template v-else-if="column.dataIndex === 'flowDefine'">
                        <a-popover title="流程定义">
                            <template #content>
                                <JsonEditor style="width: 400px;" v-model:value="record.flowDefine" readOnly>
                                </JsonEditor>
                            </template>
                            <a-button>查看</a-button>
                        </a-popover>
                    </template>
                    <template v-if="column.dataIndex === 'action'">
                        <a-row>
                            <a-col :span="6">
                                <a-tooltip>
                                    <template #title>修改信息</template>
                                    <view v-isAdmin>
                                        <a-button type="link" @click="$.emit('update-define', record.id)">
                                            <FormOutlined />
                                        </a-button>
                                    </view>
                                </a-tooltip>
                            </a-col>
                            <a-col :span="6">
                                <a-popconfirm title="是否删除该流程 ?" @confirm="handleDelete(record.id)">
                                    <a-tooltip>
                                        <template #title>流程删除</template>
                                        <view v-isAdmin>
                                            <a-button type="link">
                                                <DeleteOutlined style="color: #f5222d;" />
                                            </a-button>
                                        </view>
                                    </a-tooltip>
                                </a-popconfirm>

                            </a-col>
                            <a-col :span="6">
                                <a-tooltip>
                                    <template #title>节点授权</template>
                                    <a-button v-if="$.hasPerm('flow:define:update')" type="link"
                                        @click="$.emit('define-assign', record)">
                                        <SafetyOutlined style="color: green;" />
                                    </a-button>

                                </a-tooltip>
                            </a-col>
                        </a-row>
                    </template>
                </template>
            </a-table>
        </AntdZh>
        <DefineCreateModal />
        <DefineUpdateModal />
        <DefineNodeAssignDrawer/>
    </view>
</template>
<script setup>
import DefineCreateModal from './components/DefineCreateModal.vue';
import DefineUpdateModal from './components/DefineUpdateModal.vue';
import DefineNodeAssignDrawer from './components/DefineNodeAssignDrawer.vue';
import { SafetyOutlined, FormOutlined, KeyOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import useApp from '@/hooks';
const { $ } = useApp();
import { columns, defaultQueryParams } from './index';
import { queryList, deleteOne, listGroup } from '@/module/flow/api/define';
const tableData = ref([])
const loading = ref(false)
const total = ref(0)
const queryParams = ref($.freeStore(defaultQueryParams))
const pagination = computed(() => ({
    total: total.value,
    current: queryParams.pageNum,
    pageSize: queryParams.pageSize,
}));
function handleTableChange(page, filters, sorted) {
    queryParams.value.pageSize = page.pageSize;
    queryParams.value.pageNum = page.current;
    // 获取 status
    // 状态
    var status = filters.status;
    console.log(status)
    if ($.isNotEmpty(status)) {
        queryParams.value.status = status[0];
    } else {
        queryParams.value.status = null
    }
    var groups = filters.flowGroup;
    if ($.isNotEmpty(groups)) {
        queryParams.value.groups = groups;
    } else {
        queryParams.value.groups = []
    }
    reqData();
}
// 删
function handleDelete(id) {
    deleteOne(id).then(res => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        reqData()
    })
}
// 请求数据
function reqData() {
    loading.value = true;
    queryList(queryParams.value).then(res => {
        console.log(res)
        loading.value = false;
        tableData.value = res.content;
        total.value = res.totalElements;
    })
}
// 获取分组
listGroup().then(res => {
    console.log(res)
    var list = res.map(ele => {

        let obj = {
            text: ele,
            value: ele
        }
        return obj;


    })
    // 修改筛选信息
    columns[0].filters = list;
})
reqData();
$.on('fresh-define', r => {
    reqData();
});
</script>